<template>
	<view>
		<view class="search">
			<image src="../../static/img/serach.png" mode=""></image>
			<input type="text" value="" placeholder="中文/简拼" v-model="clientname" @input="intFocus" />
		</view>

		<scroll-view class="list-scroll" :style="{ height: height + 'px' }" :scroll-y="true" :scroll-into-view="jumpNum">
			<view :id="'index' + index" v-for="(item, index) in Object.keys(ebusStationResult).sort()" :key="index" v-if="clientname.length === 0">
				<view class="list-title">{{ item }}</view>
				<view
					class="cityList"
					v-for="(items, index) in ebusStationResult[item]"
					:key="index"
					for-index="index"
					:data-detail="JSON.stringify(items)"
					:data-name="items.targetName"
					:data-code="items.globalcode"
					@tap="back"
				>
					{{ items.targetName }}
				</view>
			</view>
			<!-- 搜索后列表 -->
			<view class="cityList" v-for="(item, index) in ls" :key="index" v-if="clientname.length != 0">
				<view @tap="back" :data-name="item.targetName" :data-code="item.globalcode">{{ item.targetName }}</view>
			</view>
		</scroll-view>

		<!-- 右侧索引 -->
		<view class="list-right-wrapper" v-if="clientname.length === 0">
			<view class="right-item" v-for="(itemLetter, index) in rightArr" :key="index" :data-id="'index' + index" @tap="jumpMt">{{ rightArr[index] }}</view>
		</view>

		<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			ls: [],
			cityData: [],
			clientname: '',
			departStationCode: '',
			active: true,
			list: [
				{ alphabet: 'A', datas: ['ss', 'sssare here'] },
				{ alphabet: 'B', datas: ['bbsome', 'bebntries', 'bare here'] },
				{ alphabet: 'C', datas: ['csome', 'centries', 'care here'] },
				{ alphabet: 'D', datas: ['dsome', 'dentries', 'dare here'] },
				{ alphabet: 'E', datas: ['esome', 'eentries', 'eare here'] },
				{ alphabet: 'F', datas: ['fsome', 'fentries', 'are here'] },
				{ alphabet: 'G', datas: ['gsome', 'gentries', 'gare here'] },
				{ alphabet: 'H', datas: ['hsome', 'hentries', 'hare here'] },
				{ alphabet: 'I', datas: ['isome', 'ientries', 'iare here'] },
				{ alphabet: 'J', datas: ['jsome', 'jentries', 'jare here'] },
				{ alphabet: 'K', datas: ['ksome', 'kentries', 'kare here'] },
				{ alphabet: 'L', datas: ['lsome', 'lentries', 'lare here'] },
				{ alphabet: 'M', datas: ['msome', 'mentries', 'mare here'] },
				{ alphabet: 'N', datas: ['nsome', 'nentries', 'nare here'] },
				{ alphabet: 'O', datas: ['osome', 'oentries', 'oare here'] },
				{ alphabet: 'P', datas: ['psome', 'pentries', 'pare here'] },
				{ alphabet: 'Q', datas: ['qsome', 'qentries', 'qare here'] },
				{ alphabet: 'R', datas: ['rsome', 'rentries', 'rare here'] },
				{ alphabet: 'S', datas: ['some', 'sentries', 'sare here'] },
				{ alphabet: 'T', datas: ['tsome', 'tentries', 'tare here'] },
				{ alphabet: 'U', datas: ['usome', 'uentries', 'uare here'] },
				{ alphabet: 'V', datas: ['vsome', 'ventries', 'vare here'] },
				{ alphabet: 'W', datas: ['wsome', 'wentries', 'ware here'] },
				{ alphabet: 'X', datas: ['xsome', 'xentries', 'xare here'] },
				{ alphabet: 'Y', datas: ['ysome', 'yentries', 'yare here'] },
				{ alphabet: 'Z', datas: ['zsome', 'zentries', 'zare here'] }
			],
			rightArr: [], // 右侧字母展示
			ebusStationResult: [],
			jumpNum: '', //跳转到哪个字母
			height: ''
		};
	},
	components: {},
	onLoad() {
		let that = this;
		this.getStation();
		uni.getSystemInfo({
			success: res => {
				var height = res.windowHeight;
				that.height = height;
			}
		});
	},
	methods: {
		// 获取车站列表
		getStation() {
			const that = this;
			uni.getStorage({
				key: 'departStation',
				success: res => {
					let data = {
						globalcode: res.data.departStationCode,
						ticks: utils.utils.GetTicks(),
						channel: this.$tokenObj.obj.channel
					};
					data.sign = utils.utils.GetSign(data);
					this.$http
						.request({
							url: '/BusInfo/GetTargetInfo',
							methods: 'get',
							data: data
						})
						.then(res => {
							let station_list = res.data.targetInfos;
							let destStation = {};
							for (var i = 0; i < station_list.length; i++) {
								let short = station_list[i].targetPyCode.charAt(0);
								if (!destStation[short]) {
									destStation[short] = [];
								}
								destStation[short].push(station_list[i]);
							}
							that.ebusStationResult = destStation;

							let rightArr = [];
							for (var i = 0; i < res.data.targetInfos.length; i++) {
								rightArr.push(res.data.targetInfos[i].targetPyCode.charAt(0));
							}
							let newArr = Array.from(new Set(rightArr));
							newArr.sort();
							that.rightArr = newArr;

							this.active = false;
							if (res.data.targetInfos == '') {
								uni.showModal({
									title: '提示',
									content: '该始发站没有目的车站',
									success: function(res) {
										if (res.confirm) {
											uni.navigateBack({});
										} else if (res.cancel) {
										}
									}
								});
							}
							if (res.data.result === false) {
								uni.showModal({
									title: '提示',
									content: res.data.msg,
									success: function(res) {
										if (res.confirm) {
											uni.navigateBack({});
										} else if (res.cancel) {
										}
									}
								});
							}
							that.cityData = res.data.targetInfos;
						})
						.catch(err => {
							console.log(err);
						});
				}
			});
		},
		// 选择车站
		back: function(e) {
			const obj = {
				endStationCode: e.target.dataset.code,
				endStationName: e.target.dataset.name
			};
			value.value.endStationName = e.target.dataset.name;
			uni.setStorage({
				data: obj,
				key: 'endStation',
				success() {
					uni.navigateBack({});
				}
			});
		},
		// 搜索车站
		intFocus(e) {
			this.ls = [];
			this.clientname = e.detail.value;
			var list = this.cityData,
				cityArr = [];
			if (this.clientname != '') {
				for (var i = 0; i < list.length; i++) {
					if (list[i].targetName.indexOf(this.clientname) == 0 || list[i].targetPyCode.indexOf(this.clientname.toUpperCase()) == 0) {
						cityArr.push(list[i]);
					}
				}
			} else {
				this.clientname = '';
			}
			this.ls = cityArr;
		},
		jumpMt(e) {
			let that = this;
			let jumpNum = e.currentTarget.dataset.id;
			this.jumpNum = jumpNum;
		}
	}
};
</script>

<style scoped>
/* 搜索框 */
.search {
	width: 96%;
	margin: auto;
	height: 65upx;
	display: flex;
	margin-top: 10upx;
	padding-left: 10upx;
	border: 1px solid #cccccc;
}
.search image {
	width: 40upx;
	height: 40upx;
	margin-top: 12upx;
}
.search input {
	width: 100%;
	color: #c0c0c0;
	margin-top: 10upx;
	font-size: 28upx;
	margin-left: 5upx;
}
/* 列表内容 */
.cityList {
	line-height: 100upx;
	padding-left: 20upx;
	font-size: 32upx;
	color: #333;
	border-bottom: 1px solid #dbdbdb;
}

/* 右侧字母 */
.list-right-wrapper {
	position: fixed;
	top: 200upx;
	right: 5upx;
	padding: 10upx 0;
	z-index: 2;
}
.right-item {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2upx 10upx;
	font-size: 26upx;
	color: #01a1e9;
}
.list-title {
	width: 100%;
	color: #a9a9a9;
	font-size: 30upx;
	line-height: 40upx;
	padding-left: 15upx;
	background-color: #f8f8f8;
}
</style>
